
.appoint{
    // width: 280px;
    // margin: 0 auto;
    padding: 0 20px;
    .month-courses{
        h2{
            font-size: 34px;
            color: #272D32;
            letter-spacing: 0;
        }
        .courses{
            .course{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                padding: 12px;
                margin-bottom: 10px;
                background: #F7F7FA;
                border-radius: 4px;
                .course-info{
                    width: 184px;
                    h3{
                        font-size: 16px;
                        color: #272D32;
                        line-height: 1.3;
                    }
                    p{
                        font-size: 12px;
                        color: #ACB2C6;
                        line-height: 14px;
                        svg{
                            transform: translateY(5px);
                            margin-right: 6px;
                        }
                    }
                }
                button{
                    width: 62px;
                    height: 30px;
                    border: 0 none;
                    outline: 0 none;
                    border-radius: 15px;
                    background: #EBEBF6;
                    color: #2383D8;
                }
            }
        }
    }
    p.more{
        text-align: center;
        font-size: 14px;
        button{
            margin: 20px 0 18px;
            border: 0 none;
            outline: 0 none;
            color: #64667F;
            background: transparent;
        }
        &.canLoad{
            button{
                color: #2383D8;
            }
        }
    }
}